<template>
  <!-- UnlockOrder 人脉解锁 -->
  <PageContainer>
    <view class="container">
      <Header title="解锁联系方式" :isBoxShadow="false" />

      <view class="bgf pa-15">
        <view class="orderStatus">
          <view class="pt-19 statusLaber">{{ getOrderStatusText }}</view>
          <view class="pt-9 pb-21 color2 fz-12">
            {{
              orderDetails?.orderState === OrderStateEnum.DONE
                ? '已解锁联系方式'
                : '支付后即可查看联系方式'
            }}
          </view>
        </view>
      </view>

      <MemberCardItem v-if="contactInfo" :item="contactInfo" margin-bottom="30rpx" />

      <view v-if="orderDetails?.orderState === OrderStateEnum.DONE" class="bgf px-15 pb-10">
        <view class="cellBox">
          <view>电话: {{ contactWay.phone }}</view>
          <view class="color1" @click="makePhoneCall">拨打</view>
        </view>
        <view class="cellBox">
          <view>微信: {{ contactWay.wechatId || '无' }}</view>
          <view
            v-if="contactWay.wechatId"
            class="color1"
            @click="setClipboardData(contactWay.wechatId)"
          >
            复制
          </view>
        </view>
        <view class="cellBox">
          <view>邮箱: {{ contactWay.email || '无' }}</view>
          <view v-if="contactWay.email" class="color1" @click="setClipboardData(contactWay.email)">
            复制
          </view>
        </view>
      </view>

      <OrderInfo
        :price="orderDetails?.payMoney"
        :order-code="orderDetails?.orderCode"
        :pay-time="orderDetails?.payTime"
        :create-time="orderDetails?.createTime"
      />

      <TButtonGroup
        v-if="orderDetails?.orderState === OrderStateEnum.NOPAYMENT"
        :styles="{
          paddingTop: '20rpx',
          backgroundColor: '#FFF',
        }"
      >
        <template #header>
          <view class="slotBox">
            <text>合计</text>
            <text class="plice">{{ formatMoney({ money: orderDetails?.payMoney || 0, showFreeText: true }) }}</text>
          </view>
        </template>
        <TButton class="gutter-btn" text="立即支付" type="primary" @click="confirm" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  UnlockOrder  人脉解锁 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import OrderInfo from '../components/orderInfo.vue';
  import { navigateBack, onLoad } from '@/router';
  import { getContactInformation, getunlockOrderDetail } from '@/api/order';
  import type {
    GetContactInformationResult,
    MemberContactsVo,
    UnlockOrderDetailResult,
  } from '@/api/order/types';
  import { computed, ref, unref } from 'vue';
  import { formatMoney } from '@/utils/number';
  import { OrderStateEnum } from '@/enums/orderEnum';
  import { requestPayment } from '../utils/payment';
  import { UniEmitNameEnum } from '@/enums/uniEmitEnum';
  import MemberCardItem from '@/components/ContactsMap/components/MemberCardItem.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { Toast } from '@/utils';

  const contactInfo = ref<MemberContactsVo>();
  const orderDetails = ref<UnlockOrderDetailResult>();
  const contactWay = ref<GetContactInformationResult>({
    phone: '',
    email: '',
    wechatId: '',
  });
  onLoad<'UnlockOrder'>((op) => {
    const id = op.orderCode || (op.id as string);
    getunlockOrderDetail(id).then(async (r) => {
      if (r.orderState === OrderStateEnum.DONE) {
        contactWay.value = await getContactInformation(r.suborder.memberLeadingId);
      }
      contactInfo.value = r.suborder.memberContactsVo;
      orderDetails.value = r;
    });
  });

  const getOrderStatusText = computed(() => {
    const status = unref(orderDetails)?.orderState;
    switch (status) {
      case OrderStateEnum.NOPAYMENT:
        return '待支付后解锁';
      case OrderStateEnum.DONE:
        return '已解锁';
      case OrderStateEnum.CLOSED:
        return '已关闭';
    }
  });

  function confirm() {
    if (!orderDetails.value) return;
    const { payMoney, payCode } = orderDetails.value;
    if (payMoney <= 0) {
      success();
    } else {
      requestPayment(payCode).then(success);
    }
  }

  function success() {
    Toast('解锁成功', 'success', 1500);
    setTimeout(() => {
      uni.$emit(UniEmitNameEnum.REFRESHPREVIOUSPAGE);
      navigateBack();
    }, 1000);
  }

  // 拨打电话
  function makePhoneCall() {
    uni.makePhoneCall({
      phoneNumber: contactWay.value.phone,
    });
  }

  // 复制信息
  function setClipboardData(copyText: string) {
    uni.setClipboardData({
      data: copyText,
      success: function () {
        uni.showToast({
          title: '复制成功',
        });
      },
    });
  }
</script>

<style lang="scss" scoped>
  .orderStatus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff4e7;
    border-radius: 20rpx;

    .statusLaber {
      color: #b47026;
      font-size: 38rpx;
      font-weight: bold;
    }
  }

  .color1 {
    color: #2878ff;
  }

  .color2 {
    color: #aaabab;
  }

  .cellBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 60rpx;
    color: #808080;
    font-size: 28rpx;
  }
  .slotBox {
    width: calc(100% - 300rpx);
    padding-left: 30rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    .plice {
      color: #b47026;
      padding-left: 28rpx;
      font-size: 32rpx;
    }
  }
</style>
